<template>
	<view class="content">
		<img class="top_imgae" :src="data.topImage" alt="">
		<view class="titleName">单领优品</view>
		<view class="bigBox">
			<!-- <view class="topBox backgroundWhite">
				<view class="leftBox">
					<view class="top styleBold new">新人礼</view>
					<view class="top titles styleBold">送10元饮品抵用金</view>
					<view class="bottom lefts styleBold">欢迎大家关注领单</view>
					<view class="bottom now">立即领取 ></view>
				</view>
				<image class="rightBox" src="/static/del/del_5.png" mode=""></image>
				<view class="clearBoth"></view>
			</view> -->
		</view>
		
		<view class="threeBox">
			<view class="leftBox backgroundWhite" @tap="tapThis(0)">
				<view class="title styleBold">现在下单</view>
				<view class="titles">享新人好礼</view>
				<view class="getOne">点一杯 ></view>
				<image class="leftImage" src="/pages_index/pages/static/icon_1.png" mode=""></image>
				<view class="clearBoth"></view>
			</view>
			<view class="rightBox" @tap="tapThis(1)">
				<view class="box">
					<view class="titles styleBold">单领vip</view>
					<view class="less">超低折扣</view>
				</view>
				<img class="images" src="/pages_index/pages/static/icon_2.png" alt="">
			</view>
			<view class="rightBox" @tap="tapThis(2)">
				<view class="box">
					<view class="titles styleBold">新品优选</view>
					<view class="less">大家推荐</view>
				</view>
				<img class="images" src="/pages_index/pages/static/icon_3.png" alt="">
			</view>
			<view class="clearBoth"></view>
		</view>
		
		<view class="addrBox marginLeft5 backgroundWhite" @tap="inList">
			<view class="leftBox">
				<view class="nameTitle styleBold overflow_one">{{data.title}}</view>
				<view class="name overflow_one">距您 {{data.m}}m | {{data.addrDetails}}</view>
			</view>
			<image class="addrImage" src="/pages_index/pages/static/icon_4.png" mode=""></image>
			<view class="clearBoth"></view>
		</view>
		
		<view class="advertisementBox marginLeft2">
			<image class="advertisementImage" :src="data.adv" mode=""></image>
			<view class="advertisement fontSize12">广告</view>
		</view>
		
		<video class="videos" :src="data.video"></video><!-- :poster="data.videoPoster" -->
		
		<view class="JustTitle styleBold">新闻咨询</view>
		
		<view class="rowsList">
			<view class="rows" v-for="(item,index) in dataList" :key="index" @tap="inDetails(item.id)">
				<image class="cover" :src="item.cover" mode=""></image>
				<view class="title styleBold overflow_two">{{item.title}}</view>
				<view class="time">{{item.time}}</view>
			</view>
		</view>
		<cover-image class="homeBtn" src="/static/index/anoIndex/home.png" mode="" @tap="btnHome"></cover-image>
		<cover-image class="telBtn"  src="/static/index/anoIndex/tel.png" mode=""   @tap="btnTel"></cover-image>

	</view>
</template>
<style>
	.content{position: relative;background: rgb(245,245,249);padding-bottom: 20upx;}
	.content .backgroundWhite{background: white;border-radius:20upx;}
	.content .styleBold{font-weight: bold;}
	.content .top_imgae{width: 100%;height:450upx;}
	/* .content .titleName{width: 100%;position:absolute;top:56upx;left:0;z-index: 2;text-align: center;color:white;font-size: 40upx;font-weight: bold;} */
	.content .titleName{width: 100%;position:absolute;top:100upx;left:0;z-index: 2;text-align: center;color:white;font-size: 40upx;font-weight: bold;}
	.content .bigBox{width: 100%;padding-top: 40upx;border-top-left-radius: 40upx;border-top-right-radius: 40upx;background: rgb(245,245,249);position: relative;top:-40upx}
	.content .bigBox .topBox{width: 90%;margin-left: 5%;padding:10upx 0 10upx 0;}
	.content .bigBox .topBox .leftBox{width:65%;float: left;}
	.content .bigBox .topBox .leftBox .top,
	.content .bigBox .topBox .leftBox .bottom{float: left;padding-left: 5%;margin-top: 20upx;}
	.content .bigBox .topBox .leftBox .bottom{margin-top: 30upx;}
	.content .bigBox .topBox .leftBox .new{font-size: 34upx;color:rgb(47,47,47)}
	.content .bigBox .topBox .leftBox .titles{font-size: 34upx;color:rgb(220,88,42)}
	.content .bigBox .topBox .leftBox .lefts{font-size: 26upx;color:#999999}
	.content .bigBox .topBox .leftBox .now{font-size: 22upx;color:white;background: rgb(220,88,42);border-radius: 100upx;padding:5upx 10upx;margin-left: 5%;}
	.content .bigBox .topBox .rightBox{float: right;width: 230upx;height:160upx;}
	.content .threeBox{width: 90%;margin-left: 5%;background: rgb(245,245,249);}
	.content .threeBox .leftBox{width:48%;padding:5%;float: left;background: white;padding-bottom: 12%;}
	.content .threeBox .leftBox .title{font-size: 36upx;color:#333333;}
	.content .threeBox .leftBox .titles{font-size: 24upx;color:#C7C7C7;margin:10upx 0 0upx 0}
	.content .threeBox .leftBox .getOne{background: rgb(220,88,42);margin-top: 40upx;color:white;border-radius: 100upx;text-align: center;float: left;padding:5upx 10upx}
	.content .threeBox .leftBox .leftImage{width: 119upx;height:161upx;float: right;}
	.content .threeBox .rightBox{width:48%;padding:2%;float: right;background: white;border-radius: 10upx;margin-bottom: 10upx;}
	.content .threeBox .rightBox .box{float: left;}
	.content .threeBox .rightBox .titles{font-size: 34upx;color:#262626;margin-top: 20upx;}
	.content .threeBox .rightBox .less{font-size: 24upx;color:#999999;float:left;margin-top: 20upx;}
	.content .threeBox .rightBox .images{width:150upx;height:150upx;float:right;margin-top: 0}
	.content .addrBox{width: 90%;padding:3% 5%;margin-top: 40upx;}
	.content .addrBox .leftBox{width: 60%;float: left;}
	.content .addrBox .leftBox .nameTitle{font-size: 32upx;margin:20upx 0 50upx 0}
	.content .addrBox .leftBox .name{font-size: 24upx;color:#262626}
	.content .addrBox .addrImage{width: 220upx;height:150upx;float: right;}
	.content .advertisementBox{width:90%;height: 280upx;border-radius: 10upx;margin:40upx 0;margin-left: 5%;position: relative;}
	.content .advertisementBox .advertisementImage{width: 100%;height: 280upx;border-radius: 10upx;}
	.content .advertisementBox .advertisement{padding:5upx 10upx;position: absolute;right: 0;bottom: 0;background: rgba(0,0,0,0.4);color:white;}
	.content .videos{width: 90%;margin-left: 5%;border-radius: 5upx;}
	.content .JustTitle{font-size: 40upx;color:#262626;margin:40upx 0;margin-left: 5%;}
	.content .rowsList{width: 90%;margin-left: 5%;display: flex;justify-content: space-between;flex-wrap: wrap;}
	.content .rowsList .rows{width: 47.5%;}
	.content .rowsList .rows .cover{width: 100%;height:220upx;border-radius: 10upx;}
	.content .rowsList .rows .title{width: 100%;height:76upx;}
	.content .rowsList .rows .time{width: 100%;height:76upx;color:#999999;font-size: 26upx;}
	.content .homeBtn{width: 140upx;height:140upx;position: fixed;left:5%;bottom:5%;z-index: 2;}
	.content .telBtn{width: 140upx;height:140upx;position: fixed;right:5%;bottom:5%;z-index: 2;}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/index',
					imageUrl:'',
					desc:'',
					content:''
				},
				data:{
					lat:"",
					lng:"",
					topImage:"",
					adv:"",
					video:"",
					videoPoster:"",
					tel:"",
					title:"",
					m:"",
					addrDetails:"",
					machine_code:"",
					model_id:"",
				},
				dataList:[
					// {cover:"../../static/del/del_4.png",title:"阿萨阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德阿萨德德阿萨德",time:"12月29日"},
					// {cover:"../../static/del/del_4.png",title:"阿萨德阿萨德",time:"12月29日"},
				],
				
				
				
				
			}
		},
		onLoad(){
			var that = this;
			uni.getLocation({
				// type: 'wgs84',
				type: 'gcj02',
				success: function (res) {
					that.data.lng = res.longitude
					that.data.lat = res.latitude
					that.AjaxLoad()
				},
				error:function(e){},
			});
			this.AjaxLoad()
		},
		onReachBottom() {
			// =9a6300190000&=705
		},
		methods: {
			AjaxLoad(){
				var dataList = []
				let param={
					token:this._$userToken("userInfo").token,
					lng:this.data.lng,
					lat:this.data.lat
					// lng: 106.5686,
					// lat: 29.55314
				};
				this._$InitRequest.request("coffee/index", param).then(res => {
					this.data.topImage = res.data.top
					this.data.adv = res.data.ad
					this.data.video = res.data.video.ad_content
					this.data.videoPoster = res.data.video.ad_pic
					
					this.data.title = res.data.make.name
					this.data.m = res.data.make.distance
					this.data.addrDetails = res.data.make.address
					this.data.machine_code = res.data.make.machine_code
					this.data.model_id = res.data.make.model_id
					
					res.data.news.forEach( (item,index) =>{
						dataList.push({
							id:item.id,
							cover:item.ar_pic,
							title:item.ar_title,
							time:item.addtime,
							details:item.ar_content
						})
					})
					for (var i = 0; i < dataList.length; i++){this.dataList.push( dataList[i] )}
					
				},error=>{})
				
				let paramsA={
					token:this._$userToken("userInfo").token,
				};
				this._$InitRequest.request("MemberInfo/get_contact_us", paramsA).then(res => {
					this.data.tel = res.data.contact_us
				},error=>{})
				
			},
			btnHome(){uni.switchTab({url:"/pages/tabbar/index"})},
			btnTel(){
				var that = this;
				uni.makePhoneCall({
				    phoneNumber: that.data.tel,
					success: (res) => {
						console.log('成功!')
					},
					fail: (res) => {
						console.log('失败!')
					}
				});
			},
			inDetails(e){
				uni.navigateTo({
					url:"/pages_index/pages/newsDetails/newsDetails?html=" + e
				})
			},
			inList(){
				uni.navigateTo({
					url:"/pages_kafei/pages/kafeiList_son/kafeiList_son?machine_code=" + this.data.machine_code + "&model_id=" + this.data.model_id
				})
			},
			tapThis(e){
				if( e == 0 ){
					uni.navigateTo({
						url:"/pages_kafei/pages/addr/addr"
					})
				}else if( e == 1 ){
					uni.navigateTo({
						url:"/pages_mine/pages/vip/vip"
					})
				}else if( e == 2 ){
					uni.navigateTo({
						url:"/pages_kafei/pages/kafeiList/kafeiList"
					})
				}
			}
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>